<template>
	<div class="ratingSelect">
		<div class="rating-type border-1px">
			<span class="block all" :class="{active:mySelectType==2}" @click="select(2)">{{desc.all}}<span class="count">{{ratings.length}}</span></span>
			<span class="block positive" :class="{active:mySelectType==0}" @click="select(0)">{{desc.positive}}<span class="count">{{positive.length}}</span></span>
			<span class="block negative" :class="{active:mySelectType==1}" @click="select(1)">{{desc.negative}}<span class="count">{{negative.length}}</span></span>
		</div>
		<div class="switch" :class="{on:myOnlyContent}" @click="toggleSwitch">
			<span class="icon-check_circle"></span>
			<span class="text">只看有内容的评价</span>
		</div>
	</div>
</template>

<script>
	const POSITIVE=0//推荐
	const NEGATIVE=1//吐槽
	const ALL=2 //全部
	export default{
		name:'ratingSelect',
		data(){
			return{
				mySelectType:this.ratingType,
				myOnlyContent:this.onlyContent
			}
		},
		methods:{
			select(type){
				this.mySelectType=type
				//派发事件
				this.$root.eventHub.$emit('selectType',type)
			},
			toggleSwitch(){
				this.myOnlyContent=!this.myOnlyContent
				this.$root.eventHub.$emit('selectContent',this.myOnlyContent)
			}
		},
		props:{
			ratings:{
				type:Array,
				default(){
					return []
				}
			},
			ratingType:{
				type:Number,
				default:ALL
			},
			onlyContent:{
				type:Boolean,
				default:false
			},
			desc:{
				type:Object,
				default(){
					return{
						all:'全部',
						positive:'满意',
						negative:'不满意'
					}
				}
			}
		},
		computed:{
			positive(){
				return this.ratings.filter((rating)=>{
					return rating.rateType===POSITIVE
				})
			},
			negative(){
				return this.ratings.filter((rating)=>{
					return rating.rateType===NEGATIVE
				})
			}
		}
	}
</script>

<style lang="scss">
	@import '../common/style/mixin.scss';
	.ratingSelect{
		padding: 0 18px;
		border-bottom: 1px solid rgba(7,17,27,0.2);
		.rating-type{
			@include  border-1px(rgba(7,17,27,0.1));
			padding-bottom: 18px;
			.block{
				display: inline-block;
				margin-right: 8px;
				padding: 8px 12px;
				border-radius: 2px;
				line-height: 16px;
				font-size: 12px;
				color: rgb(77,85,93);
				background: rgb(0,160,220);
				&.active{
					color: #ffff;
				}
				.count{
					font-size: 8px;
					margin-left: 2px;
				}
				&.positive{
					background-color: rgba(0,160,220,0.2);	
				}
				&.negative{
					background-color: rgba(77,85,93,0.2);
				}
			}
		}
		.switch{
			padding: 12px 0;
			color: rgb(147,153,159);
			&.on{
				.icon-check_circle{
					color: #42b983;
				}
			}
			.icon-check_circle{
				display: inline-block;
				font-size: 24px;
				line-height: 24px;
				vertical-align: top;
			}
			.text{
				display: inline-block;
				vertical-align: top;
				font-size: 12px;
				line-height: 24px;
				margin: 0 0 0 4px;
				
			}
		}
	}
</style>
